<template>
    <div class = "administrator">
        <el-container>
            <el-container>
            <el-main>
        <div class = "butoon-wrapper">
            <el-button style="float:left" type="primary" @click = "increasedClick">新增角色</el-button>
            <div class = "input-wrapper">
            <el-input style = "width:200px;margin-right:5px;" v-model="filtration" placeholder="请输入姓名"></el-input>
            <el-button type="primary">搜索</el-button>
            </div>
        </div>
        <div class = "form-wrapper">
            <el-table
                :data="filteredBlogs"
                border
                style="width: 100%"
                >
                <el-table-column
                prop="date"
                label="角色"
                align="center"
                width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.date }}</span>
                </template>
                </el-table-column>
                <el-table-column
                prop="name"
                label="姓名"
                align="center"
                width="180"
                >
                </el-table-column>
                <el-table-column
                prop="address"
                align="center"
                label="描述">
                </el-table-column>
                <el-table-column
                align="center"
                label="操作">
                 <template slot-scope="scope">
                <el-button type="primary" size='small' @click = editor(scope.row)>编辑权限</el-button>
                <el-button type="danger" size='small' @click = "Removepermissions(scope.$index, scope.row)">删除</el-button>
                </template>
                </el-table-column>
            </el-table>
        </div>
        <div class = "reminder-wrapper">
        <el-dialog
            title="新增角色"
            :visible.sync="dialogVisible"
             width="30%"
            :before-close="handleClose">
            <!-- <div class = "inputone-wrappe">
                <label>姓名</label>
                <el-input :maxlength='10' style = "width:80%;margin-left:20px;" v-model="input" ></el-input>
            </div> -->
             <!-- <div class = "inputtwo-wrappe">
                <label>描述</label>
                <el-input style = "width:80%;margin-left:20px;" v-model="inputone" placeholder="Please enter description"></el-input>
            </div> -->
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="50px" class="demo-ruleForm">
            <el-form-item label="名字" prop="pass">
                <el-input  v-model="ruleForm.pass" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="描述" prop="checkPass">
                <el-input v-model="ruleForm.checkPass" autocomplete="off"></el-input>
            </el-form-item>
                <el-form-item label="姓名" prop="phone">
                <el-tree
                    style="width: 100%;"
                    :data="data"
                    show-checkbox
                    default-expand-all
                    node-key="id"
                    ref="tree"
                    highlight-current
                    :default-checked-keys="jurisdictionArr"
                    :props="defaultProps">
                    </el-tree>
                </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="newlyincreasedone">修改</el-button>
                <el-button type="primary" @click="newlyincreased('ruleForm')">提交</el-button>
                <el-button @click="resetForm('ruleForm')">取消</el-button>
            </el-form-item>
            </el-form>
            <!-- <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="newlyincreased">确 定</el-button>
            </span> -->
            </el-dialog>
        </div>
    </el-main>
    </el-container>
    </el-container>
    </div>
</template>
<script>
export default {
    data(){
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入名字'));
        } else {
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else {
          callback();
        }
      };
        return{
            tableData: [{
            date: '管理员',
            name: '小飞',
            address: '我是修电脑的'
          }, {
            date: '管理员',
            name: '小海',
            address: '我是做后端的'
          }, {
            date: '管理员',
            name: '小慧',
            address: '我是打篮球的'
          }],
          input:'',
          inputone:'',
          dialogVisible: false,
          filtration:'',
        data: [
            {
            id: '首页',
            label: '首页',
            },
            {
            id: '权限管理',
            label: '权限管理',
                children: [{
                    id: '管理员',
                    label: '管理员',
                }]
            },{
            id: '数据统计',
            label: '数据统计',
                children: [{
                    id: '七天数据',
                    label: '七天数据'
                }]
            }, {
            id: '文章管理',
            label: '文章管理',
            }],
            jurisdictionArr:[],
            defaultProps: {
            children: 'children',
            label: 'label',
            },
            Index:[],  
         ruleForm: {
          pass: '',
          checkPass: '',
        },
        rules: {
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ],
        }
        }
    },
    computed: {
        // 搜索过滤
        filteredBlogs(){
            return this.tableData.filter((item) => {
                return item.name.match(this.filtration)
            })
        }
    },
    methods: {
        newlyincreasedone(){
        },
        resetForm(formName) {
            this.dialogVisible = false
            this.$refs[formName].resetFields();
        },
         Removepermissions(index, row){
            this.tableData = this.tableData.filter(data => data.name !== row.name)
         },
        // 提示组件
        open1() {
            this.$notify({
            title: '成功',
            message: '这是一条成功的提示消息',
            type: 'success',
            duration:1000
            });
      },
        handleClose(done) {
            done();
            this.$refs[formName].resetFields();
        },
        // 编辑
        editor(item){
            this.dialogVisible = true
            this.ruleForm.pass = item.name
            this.ruleForm.checkPass = item.address
        },
        newlyincreased(formName){
             this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.open1()
                    this.jurisdictionArr = this.$refs.tree.getCheckedKeys()
                    let obj = {
                        date:'管理员',
                        name:this.ruleForm.pass,
                        address:this.ruleForm.checkPass
                    }
                    this.tableData = [obj,...this.tableData]
                    this.resetForm(formName)
                } else {
                    console.log('error submit!!');
                    return false;
                }
        });
        },
        increasedClick(){
            this.dialogVisible = true
        }
    },
}
</script>
<style scoped>
    .administrator{
        width:100%;
    }
    .form-wrapper{
        margin-top:20px;
    }
    .reminder-wrapper .inputone-wrappe{
        padding-bottom: 15px;
    }
    .reminder-wrapper .treenode-wrapper{
        display: flex;
        margin-top:20px;
    }
    .reminder-wrapper .treenode-wrapper .jurisdiction-title{
        width:80px;
    }
    .butoon-wrapper{
        height: 40px;
    }
    .butoon-wrapper .input-wrapper {
        float:right;
    }
</style>
